<template>
  <cover-view class="control-tool-container">
    <!-- 工具列表 - 使用cover-view确保能覆盖在webview上 -->
    <template v-if="bindData.pc_code">
      <cover-view v-if="isCollapsed" class="tool-list-container">
        <cover-image class="tool-list-toggle" src="./images/fold-group.png" @click="toggleCollapse"></cover-image>
      </cover-view>
      <cover-view v-else class="tool-list" :class="[styleType]">
        <cover-view class="tool-list-header" v-if="styleType === 'row'">
          <cover-view class="tool-list-header-text">控制面板</cover-view>
          <cover-view class="tool-list-header-right">
            <cover-image class="tool-list-header-close" src="./images/icon-close.png" @click="toggleCollapse"></cover-image>
          </cover-view>
        </cover-view>
        <cover-view
          v-for="tool in tools"
          :key="tool.id"
          v-if="['activity','close'].includes(tool.type) ? styleType === 'row' : true"
          class="tool-item"
          :data-type="tool.type"
          :data-id="tool.id"
          @touchstart="handleTouchStart"
          @touchend="handleTouchEnd"
          @touchmove="handleTouchMove"
        >
          <cover-view class="tool-item-box">
            <cover-image
              :src="tool.id === currentToolId ? tool.icon_active : tool.icon"
              :class="{ active: tool.id === currentToolId }"
              class="tool-item-icon"
            ></cover-image>
            <cover-view class="tool-item-name">{{ tool.text }}</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </template>
    <!-- 扫码绑定 -->
    <template v-else>
      <cover-view class="footer-placeholder"></cover-view>
      <cover-view class="footer-container">
        <cover-view @click="scanQRCode" class="scanQR-box">扫码投屏</cover-view>
      </cover-view>
    </template>
  </cover-view>
</template>

<script>
import { bindData, defaultTools, scanQRCode } from './controlTool.js'
export default {
  name: 'ControlTool',
  // 组件属性
  props: {
    // 自定义工具配置项
    customTools: {
      type: Array,
      default: () => [],
    },
    // 自定义事件监听器
    eventListeners: {
      type: Object,
      default: () => ({}),
    },
    // 长按判定时间(毫秒)
    longPressDelay: {
      type: Number,
      default: 500,
    },
    // 长按持续执行间隔(毫秒)
    longPressIntervalTime: {
      type: Number,
      default: 100,
    },
  },

  data() {
    return {
      // 长按相关变量
      longPressTimer: null, // 长按判定定时器
      longPressInterval: null, // 长按持续执行定时器
      isLongPress: false, // 是否处于长按状态
      isPressing: false, // 是否正在按下
      currentTouchType: null, // 当前触摸的工具类型
      currentToolId: null, // 当前触摸的工具ID

      // 默认工具配置
      defaultTools: defaultTools,
      // 折叠状态
      isCollapsed: true,
      // 样式类型 default=竖列，row=水平列
      styleType: 'row',
    }
  },

  // 计算属性 - 合并默认工具和自定义工具
  computed: {
    // 合并默认工具和自定义工具
    tools() {
      // 如果提供了自定义工具，则使用自定义工具，否则使用默认工具
      if (this.customTools && this.customTools.length > 0) {
        return this.customTools.map((tool) => ({
          ...tool,
          // 确保必要的字段存在
          id: tool.id || `tool_${Math.random().toString(36).substr(2, 9)}`,
          onTap: tool.onTap || this.defaultTapHandler,
          onLongPressStart: tool.onLongPressStart || this.defaultLongPressStartHandler,
          onLongPressing: tool.onLongPressing || this.defaultLongPressingHandler,
          onRelease: tool.onRelease || this.defaultReleaseHandler,
        }))
      }
      return this.defaultTools
    },
    // 绑定设备
    bindData() {
      return bindData
    },
  },
  beforeDestroy() {
    // 组件销毁时清除所有定时器
    this.clearTimers()
  },
  methods: {
    scanQRCode,
    // 默认事件处理函数
    defaultTapHandler(tool) {
      console.log(`点击了工具: ${tool.text}`, tool)
    },

    defaultLongPressStartHandler(tool) {
      console.log(`长按开始: ${tool.text}`, tool)
    },

    defaultLongPressingHandler(tool) {
      console.log(`长按持续中: ${tool.text}`, tool)
    },

    defaultReleaseHandler(tool) {
      console.log(`松开工具: ${tool.text}`, tool)
    },

    // 根据工具类型获取工具对象
    getToolById(toolId) {
      return this.tools.find((tool) => tool.id === toolId)
    },

    // 根据工具类型获取工具对象
    getToolByType(toolType) {
      return this.tools.find((tool) => tool.type === toolType)
    },

    // 触发全局事件
    emitEvent(eventName, tool) {
      // 触发Vue自定义事件
      this.$emit(eventName, tool)

      // 调用通过props传入的事件监听器
      if (this.eventListeners && this.eventListeners[eventName] && typeof this.eventListeners[eventName] === 'function') {
        this.eventListeners[eventName](tool)
      }
    },

    // 处理触摸开始
    handleTouchStart(e) {
      // 阻止默认行为，防止触发浏览器右键菜单
      if (e.preventDefault) {
        e.preventDefault()
      }

      const toolType = e.currentTarget.dataset.type
      const toolId = e.currentTarget.dataset.id

      this.currentTouchType = toolType
      this.currentToolId = toolId
      this.isLongPress = false
      this.isPressing = true

      console.log('按下工具:', toolType)

      // 设置长按判定定时器
      this.longPressTimer = setTimeout(() => {
        this.isLongPress = true
        // 触发长按开始事件
        this.handleLongPressStart(toolType, toolId)

        // 设置长按持续执行定时器
        this.longPressInterval = setInterval(() => {
          this.handleLongPressing(toolType, toolId)
        }, this.longPressIntervalTime)
      }, this.longPressDelay)
    },

    // 处理触摸结束
    handleTouchEnd(e) {
      // 阻止默认行为
      if (e.preventDefault) {
        e.preventDefault()
      }

      const toolType = this.currentTouchType
      const toolId = this.currentToolId
      this.isPressing = false

      // 清除所有定时器
      this.clearTimers()

      // 触发松开事件
      this.handleRelease(toolType, toolId)

      // 如果不是长按，则触发点击事件
      if (!this.isLongPress && toolType && toolId) {
        this.handleClick(toolType, toolId)
      }

      this.currentTouchType = null
      this.currentToolId = null
      this.isLongPress = false
    },

    // 处理触摸移动（用于取消长按判定或处理移动中松开）
    handleTouchMove(e) {
      // 阻止默认行为
      if (e.preventDefault) {
        e.preventDefault()
      }

      // 如果正在移动且没有进入长按状态，可以选择是否清除定时器
      // 这里保留长按判定，只在完全离开时清除
    },

    // 清除所有定时器
    clearTimers() {
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer)
        this.longPressTimer = null
      }
      if (this.longPressInterval) {
        clearInterval(this.longPressInterval)
        this.longPressInterval = null
      }
    },

    // 处理点击事件（短按）
    handleClick(toolType, toolId) {
      // 获取工具对象
      const tool = this.getToolById(toolId) || this.getToolByType(toolType)

      if (tool) {
        console.log('点击了工具:', tool.text)

        // 调用工具自身的点击处理函数
        if (typeof tool.onTap === 'function') {
          tool.onTap(tool)
        }

        // 触发全局tap事件
        this.emitEvent('tap', tool)
        // 触发特定工具的tap事件
        this.emitEvent(`${tool.type}:tap`, tool)
        this.emitEvent(`${tool.id}:tap`, tool)
      }
    },

    // 处理长按开始事件
    handleLongPressStart(toolType, toolId) {
      // 获取工具对象
      const tool = this.getToolById(toolId) || this.getToolByType(toolType)

      if (tool) {
        console.log('长按开始:', tool.text)

        // 调用工具自身的长按开始处理函数
        if (typeof tool.onLongPressStart === 'function') {
          tool.onLongPressStart(tool)
        }

        // 触发全局longPressStart事件
        this.emitEvent('longPressStart', tool)
        // 触发特定工具的longPressStart事件
        this.emitEvent(`${tool.type}:longPressStart`, tool)
        this.emitEvent(`${tool.id}:longPressStart`, tool)
      }
    },

    // 处理长按持续事件
    handleLongPressing(toolType, toolId) {
      // 获取工具对象
      const tool = this.getToolById(toolId) || this.getToolByType(toolType)

      if (tool) {
        console.log('长按持续中:', tool.text)

        // 调用工具自身的长按持续处理函数
        if (typeof tool.onLongPressing === 'function') {
          tool.onLongPressing(tool)
        }

        // 触发全局longPressing事件
        this.emitEvent('longPressing', tool)
        // 触发特定工具的longPressing事件
        this.emitEvent(`${tool.type}:longPressing`, tool)
        this.emitEvent(`${tool.id}:longPressing`, tool)
      }
    },

    // 处理松开事件
    handleRelease(toolType, toolId) {
      // 获取工具对象
      const tool = this.getToolById(toolId) || this.getToolByType(toolType)

      if (tool) {
        console.log('松开工具:', tool.text)

        // 调用工具自身的松开处理函数
        if (typeof tool.onRelease === 'function') {
          // 传入长按状态
          tool.onRelease(tool, this.isLongPress)
        }

        // 触发全局release事件
        this.emitEvent('release', { tool, isLongPress: this.isLongPress })
        // 触发特定工具的release事件
        this.emitEvent(`${tool.type}:release`, {
          tool,
          isLongPress: this.isLongPress,
        })
        this.emitEvent(`${tool.id}:release`, {
          tool,
          isLongPress: this.isLongPress,
        })
      }
    },
    // 折叠展开工具列表
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    },
  },
}
</script>

<style scoped lang="scss">
.control-tool-container * {
  box-sizing: border-box;
}
.control-tool-container {
  position: relative;
}
.tool-list-container {
  /* 确保点击区域可点击 */
  pointer-events: auto;
}
.tool-list-toggle {
  width: 45px;
  height: 45px;
  position: fixed;
  top: 40vh;
  right: 10px;
  border-radius: 50%;
  z-index: 999;
}
/* 工具列表样式 */
.tool-list {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  padding: 10px 5px;
  user-select: none;
  color: #fff;
  /* 确保点击区域可点击 */
  pointer-events: auto;
}
.tool-list.row {
  flex-direction: row;
  width: calc(100vw - 20px);
  justify-content: space-around;
  flex-wrap: wrap;
  .tool-item {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.tool-list-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 5px;
  .tool-list-header-right {
    padding: 5px 0;
  }
  .tool-list-header-text {
    font-size: 16px;
  }
  .tool-list-header-close {
    width: 15px;
    height: 15px;
    pointer-events: auto;
  }
}

/* 工具项样式 */
.tool-item-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  font-size: 16px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.tool-item-icon {
  width: 32px;
  height: 32px;
}
.tool-item-name {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}

/* 点击时的样式反馈 */
.tool-item:active {
}

// 扫码绑定
.footer-placeholder{
  height: calc(var(--status-bar-height) + 60px);
}
.footer-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  padding: 10px;
  padding-bottom: calc(var(--status-bar-height) + 10px);
  background-color: #fff;
}
.scanQR-box {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  background-color: #145efd;
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
